import React from 'react'
import './App.css'

class Square extends React.Component {
  render () {
    return (
      <button id={this.props.id} onClick={this.props.onClick}>
        {this.props.value}
        { undefined && <span ></span> }
      </button>
    )
  }
}

class Jing extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      squares: Array(9).fill(null),
      isX: true,
      isOver: false
    }
  }
  gameOver = () => {
    const arr = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6]
    ]
    const squares = this.state.squares
    for (let i = 0; i < arr.length; i++) {
      const [a, b, c] = arr[i]
      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
        this.setState({
          isOver: true
        })
        return true
      }
    }
    return false
  }
  handleClick = (index, e) => {
    const squares = this.state.squares
    const btn = document.getElementById(index)
    const span = document.createElement('span')

    const x = e.nativeEvent.offsetX
    const y = e.nativeEvent.offsetY
    span.style.top = y + 'px'
    span.style.left = x + 'px'
    btn.appendChild(span)
    
    console.log(x, y)

    setTimeout(() => {
      span.remove()
    }, 600)
    
    if (this.gameOver() || squares[index])
      return
    squares[index] = this.state.isX ? 'X' : 'O'
    this.setState({
      squares: squares,
      isX: !this.state.isX
    })
  }
  render () {
    return (
      <div>
        { this.state.isOver
          ? <div className="text">不用下了，你已经输了!</div>
          : <div className="text">下一步落子为 : {this.state.isX ? 'X' : 'O'}</div>
        }
        <div className="board-row">
          <Square id={0} value={this.state.squares[0]} onClick={ (e) => this.handleClick(0, e) }></Square>
          <Square id={1} value={this.state.squares[1]} onClick={ (e) => this.handleClick(1, e) }></Square>
          <Square id={2} value={this.state.squares[2]} onClick={ (e) => this.handleClick(2, e) }></Square>
        </div>
        <div className="board-row">
          <Square id={3} value={this.state.squares[3]} onClick={ (e) => this.handleClick(3, e) }></Square>
          <Square id={4} value={this.state.squares[4]} onClick={ (e) => this.handleClick(4, e) }></Square>
          <Square id={5} value={this.state.squares[5]} onClick={ (e) => this.handleClick(5, e) }></Square>
        </div>
        <div className="board-row">
          <Square id={6} value={this.state.squares[6]} onClick={ (e) => this.handleClick(6, e) }></Square>
          <Square id={7} value={this.state.squares[7]} onClick={ (e) => this.handleClick(7, e) }></Square>
          <Square id={8} value={this.state.squares[8]} onClick={ (e) => this.handleClick(8, e) }></Square>
        </div>
      </div>
    )
  }
}

class App extends React.Component {
  render () {
    return (
      <Jing></Jing>
    )
  }
}

export default App
